import React from "react";
import "../css/NavigationBar.css";

class NavigationBar extends React.Component{
  //构造类的对象
  constructor(props){
    super(props);
    //初始化组件的状态
    console.log(this.props);
    this.state = {
      title:""
    }
  }

  //组件即将挂载时根据传递的props更新组件的状态 
  componentWillMount(){
    console.log("componentWillMount")
    this.setState({
      title:this.props.title
    })
  }

  render(){
    console.log("render")
    return(
      <div className="navigation_bar_container">
        <div>{this.state.title}</div>
        <button onClick={()=>{
          this.props.sendMessage("我是自组件传递给父组件的数据")
        }}>点击</button>
      </div>
    );
  }

  componentDidMount(){
    console.log("componentDidMount")
  }

  //更新阶段
  componentWillReceiveProps(props){
    console.log(props);
    console.log(this.props)
    this.props = props;
    this.setState({
      title:this.props.title
    })
  }

  shouldComponentUpdate(){
    return true;
  }

  componentWillUpdate(){
    console.log("componentWillUpdate")
  }
  
  componentDidUpdate(){
    console.log("componentDidUpdate")
  }


  componentWillUnmount(){
    
  }
}

export default NavigationBar;